import React, { Component } from 'react';
import styles from './styles.less'
import { connect } from 'dva'
import { Modal, Upload, Select, Button, Form, message } from 'antd'
import search from '@/assets/common/search2.png'
import { PlusOutlined } from '@ant-design/icons';


function mapStateToProps({ projectModel, activityModel, bannerModel }) {
    return {
        projectModel: projectModel,
        activityModel: activityModel,
        bannerModel: bannerModel
    }
}
@connect(mapStateToProps)
export default class Details extends Component {
    constructor(props) {
        super(props);
        this.state = {
            bannerImg: {},//banner图片
            options: [],//活动下拉框
            search: {}//修改banner的接口条件
        }
        this.formRef = React.createRef()
    }

    componentDidMount() {
        let { bannerState, detailsData } = this.props
        if (bannerState) {
            this.setState({
                bannerImg: { url: detailsData?.bannerImg }
            }, () => {

                this.formRef?.current?.setFieldValue('bannerBg', this.state.bannerImg.url)
            })
        }
        this.getActivity()
    }

    componentWillUnmount() { }

    //封面图片上传
    onBannerImg = (data) => {
        if (data.file.size > 5242880) return message.error('文件大小最大为5mb！')
        const formData = new FormData();
        formData.delete('file')
        formData.append('file', data.file.originFileObj)
        if (data.file.status === 'uploading') {
            this.props.dispatch({
                type: "projectModel/uploadFile",
                payload: {
                    params: formData,
                    callback: (item) => {
                        // console.log(item, 'item');
                        this.setState({
                            bannerImg: { url: item.url }
                        })
                        this.formRef?.current?.setFieldValue('bannerBg', item.url)
                    }
                }
            })
        }
    }

    //取消
    cancel = () => {
        this.props.onCancel()
    }

    //提交表单
    onFinish = (data) => {
        console.log(data, 'data');
        let { search } = this.state
        let { detailsData, bannerState } = this.props
        if (bannerState) {
            const obj = { ...search, bannerId: detailsData.bannerId, activityId: data.activityName, bannerImg: data.bannerBg }
            this.setState({
                search: obj
            }, () => {
                console.log();
                this.props.updateBanner(this.state.search)
            })
        } else {
            this.props.addBanner({ activityId: data.activityName, bannerImg: data.bannerBg })
        }

    }





    //删除上传的图片
    onRemove = () => {
        this.setState({ bannerImg: {} })
        this.formRef?.current?.setFieldValue('bannerBg', null)
    }

    //获取活动类别
    getActivity = () => {
        this.props.dispatch({
            type: 'activityModel/getActivityAll',
            payload: {
                params: {
                    page: 1,
                    limit: 100
                },
                callback: (item) => {
                    console.log(item, 'item');
                    let arr = []
                    for (let i in item.list) {
                        let obj = {
                            value: item.list[i].id,
                            label: item.list[i].activityName,
                        }
                        arr.push(obj)
                    }
                    this.setState({
                        options: arr
                    })
                }
            }
        })
    }

    render() {
        let { isModalOpen, detailsData } = this.props
        let { bannerImg, options } = this.state
        return (
            <React.Fragment>
                <Modal
                    destroyOnClose={true}
                    title="banner 新增"
                    footer={null}
                    open={isModalOpen}
                    onCancel={() => { this.props.onCancel() }}
                    width={400}
                >
                    <Form
                        name="basic"
                        labelCol={{
                            span: 7,
                        }}
                        wrapperCol={{
                            span: 18,
                        }}
                        onFinish={this.onFinish}
                        ref={this.formRef}
                        initialValues={{
                            activityName: detailsData?.activityId,
                        }}
                    >
                        <Form.Item
                            label="活动名称"
                            name="activityName"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入活动名称!',
                                },
                            ]}
                        >
                            <Select
                                style={{
                                    width: 180,
                                }}
                                // onChange={this.handleChange}
                                options={options}
                            />
                        </Form.Item>
                        <Form.Item
                            label="banner背景"
                            name="bannerBg"
                            rules={[
                                {
                                    required: true,
                                    message: '请上传文件!',
                                },
                            ]}
                        >
                            <Upload
                                listType="picture-card"
                                onChange={this.onBannerImg}
                                fileList={Object.keys(bannerImg).length > 0 ? [bannerImg] : []}
                                name='file'
                                accept='.jpeg,.png,.jpg'
                                onRemove={this.onRemove}
                                onPreview={() => { window.open(bannerImg.url) }}
                            // onPreview={onPreview}
                            >
                                {
                                    Object.keys(bannerImg).length <= 0 ?
                                        <div>
                                            <PlusOutlined />
                                            <div style={{ marginTop: 8, }}> 上传 </div>
                                        </div> : null
                                }
                            </Upload>
                            <div style={{ color: '#9a9a9a', marginTop: 5, fontSize: 12 }}>
                                允许上传png、jpg、jpeg格式，最大允许上传5M
                            </div>
                        </Form.Item>
                        <div className={styles.functionBtn}>
                            <Button type="primary" htmlType="submit" style={{ marginRight: 10 }} >保存</Button>
                            <Button onClick={this.cancel}>取消</Button>
                        </div>
                    </Form>
                </Modal>
            </React.Fragment>
        );
    }
}
